<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/mvc-demo08/js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		//测试
		//获得sessionStorage中的empno
		var empno = sessionStorage.getItem("empno");
		console.log(empno);
		$(function() {
			//页面加载后执行
			$.ajax({
				url : "/mvc-demo08/emp/" + empno,
				type : "GET",
				dataType : "JSON",
				success : function(data) {
					console.log(data);
					//使用data填充表单
					var e = data;
					//编号
					$("form input[name=empno]").val(e.empno);
					//姓名
					$("form input[name=ename]").val(e.ename);
					//性别
					var sexs = $("form input[name=esex]");
					//遍历 sexs
					sexs.each(function() {
						//当前遍历到的那个对象
						if ($(this).prop("value") == e.esex) {
							//选中
							$(this).prop("checked", true);
						} else {
							//不选中
							$(this).prop("checked", false);
						}

					});
					//年龄
					$("form input[name=eage]").val(e.eage)
					//薪资
					$("form input[name=esalary]").val(e.esalary);
					//部门
					$("seleect#dep-sel").val(e.dept.deptno);//自然会选中
					//经理
					$("select#dept-sel").val(e.dept.emp);

				},
				error : function(error) {
					alert("获取数据失败");
				}

			});

		});
		function loadDatas() {
			$.ajax({
				url : "/mvc-demo08/emp/loadDatas",
				type : "GET",
				dataType : "JSON",
				//async默认为true,默认发异步请求,
				//如果修改为false,就发同步请求
				async : false,
				success : function(data) {
					console.log(data);
					var depts = data.depts;
					var mgrs = data.mgrs;
					//刷新部门数据
					for (var i = 0; i < depts.length; i++) {
						var dept = depts[i];
						var $op = $("<option value='"+dept.deptno+"'>"
								+ dept.dname + "</option>");
						$("#dept-sel").append($op);
					}
					//刷新经理数据
					for (var i = 0; i < mgrs.length; i++) {
						var mgr = mgrs[i];
						var $op = $("<option value='"+mgr.empno+"'>"
								+ mgr.ename + "</option>");
						$("#mgr-sel").append($op);
					}
				},
				error : function(error) {
					alert("加载数据失败");
				}

			});
		}
		 $(function(){
	    	   //修改员工
	     	  $("#btn").on("click",function(){
	     		   //表单验证
	     		   //姓名 2~4个汉字
	     		   var ename = $("form input[name=ename]").val();
	     		   //ename
	     		   ename = ename.trim();
	     		   if(ename===""||ename==null){
	     			   $("#ename-msg").html("姓名不能为空").css({"color":"red"});
	     			   return;
	     		   }
	     		   //创建正则对象
	     		   var reg = /^[\u4e00-\u9fa5]{0,}$/;
	                if(!reg.test(ename)){
	             	    //提示错误信息
	             	    $("#ename-msg").html("合法姓名是2~4个汉字").css({"color":"red"});
	             	    return;
	                }
	     		   //用户名验证通过
	     		       $("#ename-msg").html("OK").css({"color":"green"});
	     		   //合法年龄18~65
	     		   var eage = $("form input[name=eage]").val();
	     		   eage = eage.trim();//去掉左右的空格
	     		   if(eage==="" || eage==null){
	     			    $("#eage-msg").html("年龄不能为空").css({"color":"red"});
	     			    return;
	     		   }
	                //年龄不能为非数字
	                 if(isNaN(eage)){
	                 	 $("#eage-msg").html("年龄不能非数字").css({"color":"red"});
	      			      return;
	                 }
	                if(eage<18 || eage>65){
	             	   $("#eage-msg").html("合法年龄是18~65").css({"color":"red"});
	   			      return;
	                }
	                $("#eage-msg").html("OK").css({"color":"green"});
	                //合法薪资3000~5000
	                var esalary = $("form input[name=esalary]").val();
	                esalary = esalary.trim();
	                if(esalary===""||esalary==null){
	             	     $("#esalary-msg").html("薪资不能为空").css({"color":"red"});
	             	      return;
	                }
	                if(isNaN(esalary)){
	             	   $("#esalary-msg").html("薪资不能为非数字").css({"color":"red"});
	          	         return;
	                }
	                
	                if(esalary<3000 || esalary>50000){
	             	 $("#esalary-msg").html("合法薪资3000~5000").css({"color":"red"});
	        	         return;
	                }
	                          	   
	     		   //全部验证通过，才能提交表单
	     		  var dd =  $("#updateForm").serializeArray();
	     		   dd["7"] = {"name":"_method","value":"PUT"};
	     		  
	     		   //console.log(dd);
	     		   //提交表单
	     		    $.ajax({
	     		    	 url:"/mvc-demo08/emp",
	     		    	 type:"POST",
	     		    	 dataType:"TEXT",
	     		    	 data:dd,//$("#updateForm").serialize() +"&_method=PUT",
	     		         success:function(data){
	     		        	   if(data==="OK"){
	     		        		   location.href="/mvc-demo08/view/ListEmp.html";
	     		        	   }
	     		        	   
	     		         },
	     		         error:function(error){
	     		        	  alert("添加数据失败...");
	     		         }
	     		    });
	     	  });
	</script>
	<form id="addForm">
		<!-- 员工id -->
		<input type="hidden" name="empno" /> 姓名:<input name="ename" /> <span
			id="ename-msg"></span> <br /> 性别:<label> <input type="radio"
			name="esex" value="男" /> 男
		</label> <label> <input type="radio" name="esex" value="女" /> 女
		</label> <br /> 年龄:<input name="eage" /> <span id="eage-msg"></span> <br />
		薪资:<input name="esalary" /> <span id="esalary-msg"></span> <br /> 部门:<select
			name="dept.deptno" id="dept-sel">
		</select> <br /> 经理: <select name="mgr.empno" id="mgr-sel">
		</select> <br /> <input type="button" value="添加员工" id="btn" />
	</form>
</body>
</html>